<template>
  <div>
    <el-form ref="dataForm" :rules="rules" label-position="left" label-width="80px" style="width: 90%; margin-left: 50px">
      <el-row :gutter="40">
        <el-col :span="18">
          <el-form-item label="实体名称" prop="name">
            <el-select v-model="listQuery.tableEntityId" class="filter-item" placeholder="请选择实体名称" @change="choseName">
              <el-option v-for="(item, index) in entityeData" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-button class="filter-item" style="margin-left: 10px" type="primary" icon="el-icon-edit" @click="handRest">
          {{ $t('table.rest') }}
        </el-button>
      </el-row>
    </el-form>
    <el-table ref="table" :key="tableKey" v-loading="listLoading" element-loading-text="正在加载，请稍后" :data="list" border fit highlight-current-row style="width: 100%" max-height="400px">
      <el-table-column v-for="(item, index) in headList" :label="item" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row[item] }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="表名" min-width="150px">
              <template slot-scope="{row}">
                <span>{{ row.tableName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="表注释" min-width="150px">
              <template slot-scope="{row}">
                <span>{{ row.tableComment }}</span>
              </template>
            </el-table-column>
            <el-table-column label="描述" min-width="150px">
              <template slot-scope="{row}">
                <span>{{ row.tableComment }}</span>
              </template>
            </el-table-column> -->
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" :page-sizes="pageArray" @pagination="setList" />
  </div>
</template>
<script>
import { labelEntityList } from '@/api/metadata/entity'
import { getDetail } from '@/api/masterdata/detailTable'
import Pagination from '@/components/Pagination'
export default {
  name: 'detail',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: [],
      headList: [],
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: this.$store.getters.defaultPageSize,
      },
      temp: {},
      total: 0,
      entityeData: [],
      tableEntityId: '', //实体Id
      pageArray: this.$store.getters.pageArray,
    }
  },
  methods: {
    setList() {
      getDetail(this.listQuery).then((res) => {
        console.log(res, '列信息')
        if (res.data.code == 200) {
          this.headList = res.data.data.columnNameList
          this.list = res.data.data.pageResult.data
          this.total = res.data.data.pageResult.total
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    rest() {
      this.listQuery = {
        pageNum: 1,
        pageSize: this.$store.getters.defaultPageSize,
      }
    },
    getList(data) {
      this.rest()
      this.listQuery.tableId = data.tableId
      labelEntityList(this.listQuery).then((res) => {
        if (res.data.code == 200) {
          this.entityeData = res.data.data
        }
        // console.log(res,'名称列表')
      })
      getDetail(this.listQuery).then((res) => {
        console.log(res, '列信息')
        if (res.data.code == 200) {
          this.headList = res.data.data.columnNameList
          this.list = res.data.data.pageResult.data
          this.total = res.data.data.pageResult.total
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    handRest() {
      this.listQuery.tableEntityId = ''
      this.setList()
    },
    choseName(id) {
      this.setList()
    },
  },
}
</script>
<style>
.pagination-container {
  margin-top: 0 !important;
}
</style>
